<template>
  <div class="tabs">
    <el-tag
      v-for="(tag, index) in dynamicTags"
      :key="tag.name"
      :closable="tag.name !== 'home'"
      :disable-transitions="false"
      :effect="route.name == tag.name ? 'dark' : 'plain'"
      @close="handleClose(tag, index)"
      @click="handleMenu(tag)"
      >{{ tag.label }}</el-tag
    >
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAllDataStore } from "@/stores";
// const dynamicTags = ref(["Tag 1", "Tag 2", "Tag 3"]);
const store = useAllDataStore();
const route = useRoute();
const router = useRouter();
const dynamicTags = computed(() => store.state.tags);
const handleClose = (tags, index) => {
  store.updateTags(tags);
  // 如果点击的关闭tag不是当前展示的页面
  if (route.name !== tags.name) {
    // console.log("点击的不是当前展示的页面");
    return;
  }
  // 如果关闭的是最后一个标签页，则跳转到home页面
  if (index === store.state.tags.length) {
    store.selectMenu(dynamicTags.value[index - 1]);
    router.push(dynamicTags.value[index - 1].name);
  } else {
    store.selectMenu(dynamicTags.value[index]);
    router.push(dynamicTags.value[index].name);
    // 如果关闭的是当前展示的页面，则跳转到下一个标签页
  }
  // dynamicTags.value = dynamicTags.value.filter((item) => item !== tag);
};
const handleMenu = (tag) => {
  router.push(tag.name);
  store.selectMenu(tag);
};
</script>

<style lang="less" scoped>
.tabs {
  margin-top: 10px;
  .el-tag {
    margin-left: 10px;
  }
}
</style>
